<template>
  <view>

    <myheader color="#8CD0EB"></myheader>

    <view class="header">
      <uni-nav-bar :border="false" backgroundColor="#8CD0EB">
        <view class="title" @click="handleCut">
          <text>{{string}}</text>
          <view class="icon">
            <uni-icons type="bottom"></uni-icons>
          </view>
        </view>
      </uni-nav-bar>

      <view class="tab">
        <view>
          <uni-segmented-control :current="current" activeColor="#444" :values="items" @clickItem="onClickItem">
          </uni-segmented-control>
        </view>
      </view>
      <view class="xi" :class="{show:flg}">
        <view class="popup">
          <view class="chu" @click="handleIcon(0)">
            <uni-nav-bar :border="false" :rightIcon="icon">
              <view slot='left'>
                <uni-icons type="arrow-up"></uni-icons>
                <text>支出</text>
              </view>
            </uni-nav-bar>
          </view>
          <view class="ru" @click="handleIcon(1)">
            <uni-nav-bar :border="false" :rightIcon="icon1">
              <view slot='left'>
                <uni-icons type="arrow-down"></uni-icons>
                <text>收入</text>
              </view>
            </uni-nav-bar>
          </view>
        </view>
      </view>
    </view>
    <view class="mask" @click="handleShow" :class="{xian:flg}"></view>

    <!-- ======== -->
    <view class="content">
      <view v-show="current === 0">
        <!-- 选项卡1的内容 -->
        <view v-show="code==0">
          <uni-notice-bar single :text='`本周总支出:${weekCount},相对上周${weekContrast}`'></uni-notice-bar>
        </view>
        <view v-show="code==1">
          <uni-notice-bar single text='本周收入数据'></uni-notice-bar>
        </view>
        <chart :chartLine='week.line' :chartPie='week.pie'>
          <text v-show="code==0">本周消费类型</text>
          <text v-show="code==1">本周收入</text>
        </chart>
      </view>
      <view v-show="current === 1">
        <!-- 选项卡2的内容 -->
        <view v-show="code==0">
          <uni-notice-bar single :text='`本月总支出:${monthCount}`'></uni-notice-bar>
        </view>
        <view v-show="code==1">
          <uni-notice-bar single text='本月收入数据'></uni-notice-bar>
        </view>
        <chart :chartLine='month.line' :chartPie='month.pie'>
          <text v-show="code==0">本月消费类型</text>
          <text v-show="code==1">本月收入</text>
        </chart>
      </view>
      <view v-show="current === 2">
        <view v-show="code==0">
          <uni-notice-bar single :text='`今年总支出:${yearCount}`'></uni-notice-bar>
        </view>
        <view v-show="code==1">
          <uni-notice-bar single text='今年收入数据'></uni-notice-bar>
        </view>
        <chart :chartLine='year.line' :chartPie='year.pie'>
          <text v-show="code==0">今年消费类型</text>
          <text v-show="code==1">今年收入</text>
        </chart>
      </view>
    </view>

  </view>

</template>

<script>
  import {
    mapGetters
  } from "vuex"
  import {
    month,
    year,
    day
  } from "@/utils/fromDate.js"
  import {
    chart
  } from "@/utils/statistics.js"
  export default {
    data() {
      return {
        current: 0,
        items: ['周', '月', '年'],
        string: '支出',
        flg: false,
        icon: 'checkmarkempty',
        icon1: '',
        color: ["#73C0DE"],
        code: 0,
        chart: new chart(),
        week: {
          line: {},
          pie: {}
        },
        month: {
          line: {},
          pie: {}
        },
        year:{
          line: {},
          pie: {}
        }
      }
    },
    computed: {
      ...mapGetters(['weekExpend', 'lastWeekExpend', 'weekIncome', 'lastWeekIcome', 'weekContrast', 'weekCount',
        'monthExpend', 'monthIcome','yearExpend','yearIcome','monthCount','yearCount'
      ])
    },
    mounted() {

    },
    watch: {
      current: {
        handler(v, l) {
          if (v == 0) {
            this.$store.dispatch('getWeekTally').then(res => {
              this.data(0)
            })
          } else if (v == 1) {
            this.$store.dispatch('getMonthTally').then(res => {
              this.data(1)
            })
          } else if (v == 2) {
            this.$store.dispatch('getYearTally').then(res => {
              this.data(2)
            })
          }
        },
        immediate: true
      },
      code(v, l) {
        // console.log(2222);
        // console.log(this.current);
        this.data(this.current)
      }
    },
    methods: {
      // 数据
      data(code) {
        switch (code) {
          case 0:
            if (this.code == 0) {
              this.week.line = this.chart.weekChart(this.weekExpend, this.lastWeekExpend)
              this.week.pie = this.chart.chartPie(this.$store.state.weekConut.data, 0)
            } else if (this.code == 1) {
              this.week.line = this.chart.weekChart(this.weekIncome, this.lastWeekIcome)
              this.week.pie = this.chart.chartPie(this.$store.state.weekConut.data, 1)
            }
            break;
          case 1:
            if (this.code == 0) {
              // console.log(111111111);
              this.month.line = this.chart.monthChart(this.monthExpend)
              // console.log(this.chart.monthChart(this.monthExpend));
              this.month.pie = this.chart.chartPie(this.$store.state.monthConut.data, 0)
              // console.log(this.chart.chartPie(this.$store.state.monthConut.data,0));
            } else if (this.code == 1) {
              // console.log(this.monthIcome);
              this.month.line = this.chart.monthChart(this.monthIcome)
              this.month.pie = this.chart.chartPie(this.$store.state.monthConut.data, 1)
            }
            break
          case 2:
            if (this.code == 0) {
              // console.log(111111111);
              this.year.line = this.chart.yearChart(this.yearExpend)
              // console.log(this.chart.monthChart(this.monthExpend));
              // console.log(this.$store.state.yearConut.data);
              this.year.pie = this.chart.chartPie(this.$store.state.yearConut.data, 0)
              // console.log(this.chart.chartPie(this.$store.state.monthConut.data,0));
            } else if (this.code == 1) {
              // console.log(this.monthIcome);
              this.year.line = this.chart.yearChart(this.yearIcome)
              this.year.pie = this.chart.chartPie(this.$store.state.yearConut.data, 1)
            }
            break
        }
      },
      // mask 蒙版
      handleShow() {
        this.flg = false
      },
      // 支出收入切换
      handleIcon(code) {
        if (code == 1) {
          this.string = '收入'
          this.icon1 = 'checkmarkempty'
          this.icon = ''
          this.flg = false
          this.code = 1
        } else {
          this.string = '支出'
          this.icon = 'checkmarkempty'
          this.icon1 = ''
          this.flg = false
          this.code = 0
        }
      },
      // tab切换
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
        }
      },
      // 弹出切换支出或收入
      handleCut() {
        this.flg = true
      },
    },
  }
</script>

<style scoped lang="scss">
  .mask {
    // position: fixed;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: rgba(0, 0, 0, 0.4);
    transition: all 1s;
  }

  .xian {
    position: fixed;
    z-index: 1;
  }

  // 弹出层


  .header {
    background-color: #8CD0EB;
    position: relative;

    // z-index: 99;
    ::v-deep .uni-navbar__header-container {
      justify-content: center;
      font-size: 15px;
      font-weight: bold;
    }

    .xi {
      display: none;
      transition: all 1s;
    }

    .popup {
      position: absolute;
      width: 100%;
      // top: -10px;
      top: 82px;
      // z-index: -1;
      z-index: 2;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;


      // z-index: -2;
      .chu {
        width: 90%;
      }

      .ru {
        width: 90%;
      }
    }

    .show {
      display: block;

      // z-index: 2;
    }

    .title {

      position: relative;
      z-index: 99;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        // align-self: end;
        padding-top: 3px;
      }
    }

    .tab {
      // width: 100%;
      position: relative;
      z-index: 99;
      display: flex;
      justify-content: center;
      padding-bottom: 10px;

      // z-index: 999;
      view {
        ::v-deep .segmented-control {
          width: 100%;
          height: 28px;
        }

        width: 90%;

      }
    }
  }
</style>
